<template>
  <div class="table-wrapper">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button icon="vxe-icon-square-plus" @click="insertEvent()" style="margin-left: auto;">新增</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      height="500"
      :row-config="{isHover: true}"
      :data="tableData"
      @cell-dblclick="cellDBLClickEvent"
    >
      <vxe-column type="seq" title="序号"></vxe-column>
      <vxe-column field="name" title="数据表名"></vxe-column>
      <vxe-column field="source" title="来源应用" :formatter="formatterSex"></vxe-column>
      <vxe-column field="col_nums" title="字段数量"></vxe-column>
      <vxe-column field="date" title="创建日期" show-overflow></vxe-column>
      <vxe-column title="操作" show-overflow>
        <template #default="{ row }">
          <vxe-button mode="text" icon="vxe-icon-edit" @click="editEvent(row)"></vxe-button>
          <vxe-button mode="text" icon="vxe-icon-delete" @click="removeEvent(row)"></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-modal
      v-model="showEdit"
      v-bind:title="selectRow ? '编辑&保存' : '新增&保存'"
      width="800"
      min-width="600"
      min-height="300"
      :loading="submitLoading"
      resize
      destroy-on-close
    >
      <template #default>
        <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
          <vxe-form-item title="数据表信息" title-align="left" :title-width="200" :span="24" :title-prefix="{icon: 'vxe-icon-comment'}"></vxe-form-item>
          <vxe-form-item field="name" title="数据表名" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="Table Name"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="source" title="来源应用" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.source" placeholder="Source"></vxe-input>
            </template>
          </vxe-form-item>

          <vxe-form-item title="上传文件" title-align="left" :title-width="200" :span="24" :title-prefix="{message: '请填写必填项', icon: 'vxe-icon-info-circle-fill'}">
            <template #default>
              <div class="upload-square"></div>
            </template>
          </vxe-form-item>

          <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import VXETable from 'vxe-table'

export default {
  data() {
    return {
      submitLoading: false,
      tableData: [],
      selectRow: null,
      showEdit: false,
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      formData: {
        name: null,
        source: null
      },

      formRules: {
        name: [
          { required: true, message: '请输入数据表名' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
        ],
        source: [
          { required: true, message: '请输入来源系统' }
        ]
      }
    }
  },
  methods: {
    formatterSex({ cellValue }) {
      let item = this.sexList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    visibleMethod({ data }) {
      return data.flag1 === 'Y'
    },
    cellDBLClickEvent({ row }) {
      this.editEvent(row)
    },
    insertEvent() {
      this.formData = {
        name: '',
        nickname: '',
        role: '',
        sex: '',
        age: '',
        num: '',
        checkedList: [],
        flag1: '',
        date3: '',
        address: ''
      }
      this.selectRow = null
      this.showEdit = true
    },
    editEvent(row) {
      this.formData = {
        name: row.name,
        nickname: row.nickname,
        role: row.role,
        sex: row.sex,
        age: row.age,
        num: row.num,
        checkedList: row.checkedList,
        flag1: row.flag1,
        date3: row.date3,
        address: row.address
      }
      this.selectRow = row
      this.showEdit = true
    },
    async removeEvent(row) {
      const type = await VXETable.modal.confirm('您确定要删除该数据表?')
      const $table = this.$refs.xTable
      if (type === 'confirm') {
        $table.remove(row)
      }
    },
    submitEvent() {
      this.submitLoading = true
      setTimeout(() => {
        const $table = this.$refs.xTable
        this.submitLoading = false
        this.showEdit = false
        if (this.selectRow) {
          VXETable.modal.message({ content: '保存成功', status: 'success' })
          Object.assign(this.selectRow, this.formData)
        } else {
          VXETable.modal.message({ content: '新增成功', status: 'success' })
          $table.insert(this.formData)
        }
      }, 500)
    }
  }
}
</script>

<style scoped>
.table-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 1px;
  box-sizing: border-box;
  margin: 10px;
}

.upload-square {
  width: 100px; /* Adjust size as needed */
  height: 100px; /* Adjust size as needed */
  background-color: #f0f0f0; /* Background color of the square */
  border: 1px solid #ccc; /* Border style */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>


  